<template>
    <div>
        <div class="calendar">
            <div class="header">
                <button @click="lastMonth()">&lt;</button>
                <p class="month">{{ currentMonth }}</p>
                <button @click="nextMonth()">&gt;</button>
            </div>
            <div class="week">
                <p>日</p>
                <p>一</p>
                <p>二</p>
                <p>三</p>
                <p>四</p>
                <p>五</p>
                <p>六</p>
            </div>
            <div class="day">
                <ul>
                    <li v-for="(item, index) in date" :key="index">
                        <p :id="item.day == day && currentMonth == (new Date().getMonth() + 1) ? 'currentDay' : ''">{{
                            item.day
                        }}</p>
                        <img :src="GLOBAL.OSSImageUrlRoot + 'mood/' + item.data.moodId + '.png'"
                            alt="" :title="item.day + '日'" @click="toEssayDetail(item.data.time)"
                            :style="item.data.moodId == 0 ? 'cursor: default;' : 'cursor: pointer;'"
                            v-if="login || item.data.authority != 1">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentYear: this.year,
            currentMonth: this.month,
            date: [], // 用于生成日期的数组
            login: false, // 用于标记是否登录
        }
    },
    props: ['year', 'month', 'day'],
    mounted() {
        // 获取token,验证是否正确
        this.checkLogin()
        // 获取数据
        this.generateData()
    },
    methods: {
        // 请求后端获取该year和month的随笔数据
        // 生成数据
        generateData() {
            let time_first = new Date(this.currentYear, this.currentMonth - 1, 1) // 得到该时间的第一天
            let time_last = new Date(this.currentYear, this.currentMonth, 0) // 得到该时间的最后一天天
            this.date = [] // 清空数据
            // 往数组前插入 第一天时间的星期几个空数据
            for (let i = 0; i < Number(time_first.getDay()); i++) {
                this.date.push({
                    day: '',
                    data: {
                        moodId: 0
                    }
                })
            }
            // 请求后端，得到该月的数据，往数组中插入属于本月的日期数据
            this.$axios({
                methods: 'post',
                url: '/essay/getEssay/' + this.currentYear + '/' + this.currentMonth,
            }).then(res => {
                let dataDay = [] // 存放有数据日期
                let dataOrigin = []
                Object.keys(res.data).forEach((e) => {
                    dataDay.push(e.slice(-2)[0] == '0' ? e.slice(-1) : e.slice(-2))
                    dataOrigin.push(res.data[e])
                })
                for (let n = 1; n <= Number(time_last.getDate()); n++) {
                    let day = new Date(this.currentYear + '-' + this.currentMonth + '-' + n)
                    // 判断该日是否有数据
                    let index = dataDay.indexOf(day.getDate().toString());
                    if (index >= 0) { // 若有
                        this.date.push({
                            day: n,
                            data: dataOrigin[index]
                        })
                    } else { // 若无
                        this.date.push({
                            day: n,
                            data: {
                                moodId: 0
                            }
                        })
                    }
                }
            })
        },
        // 上个月点击事件
        lastMonth() {
            this.currentMonth = Number(this.currentMonth) - 1
            if (this.currentMonth == 0) { // 若减为0，则为12月
                this.currentMonth = 12
            }
            this.generateData() // 生成数据
        },
        // 下个月点击事件
        nextMonth() {
            this.currentMonth = 1 + Number(this.currentMonth)
            if (this.currentMonth == 13) { // 若加为12，则为1月
                this.currentMonth = 1
            }
            this.generateData() // 生成数据
        },
        // 点击进入随笔详细页面
        toEssayDetail(time) {
            if (time == null) return
            this.$router.push({
                path: '/essayDetail',
                query: {
                    time: time
                }
            })
        },
        // 查看是否登录
        checkLogin() {
            let data = new FormData()
            data.append("token", sessionStorage.getItem("token"))
            this.$axios({
                method: 'post',
                data: data,
                url: '/admin/checkToken',
                headers: {
                    'Content-Type': 'application/x-www-form-urlcoded'
                }
            }).then(res => {
                if (res.data) {
                    this.login = true
                } else {
                    this.login = false
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.calendar {
    height: 500px;
    width: 80%;
    margin: 0 auto;
    border-radius: 20px;
    background-color: $color-background-assistant;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 8px;
    transition: all .5s;
}

.header {
    height: 10%;
    width: 100%;
    border-bottom: .5px solid $color-text;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    overflow: hidden;
}

button {
    background: none;
    height: 100%;
    color: $color-main-text;
    border: none;
    cursor: pointer;
    font-size: $font-size-large;
    font-weight: $font-weight-small;
}

.month {
    text-align: center;
    line-height: 60px;
    color: $color-main-text;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
    transition: all .5s;
}

.week {
    height: 12.5%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.week>p {
    text-align: center;
    line-height: 60px;
    font-size: $font-size-medium;
}

.day {
    height: 75%;
    width: 100%;
    text-align: center;
    line-height: 60px;
}

.day ul {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(7, 1fr);
}

li {
    position: relative;
}

img {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    border-radius: 50%;
}

p {
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.day p:hover{
    color: #FA5566;
}

#currentDay {
    color: #FA5566;
}</style>